<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="searchForm" class="user-search">
      <el-form-item label="操作类型：">
        <!-- 可清空下拉框 -->
        <el-select
          size="small"
          clearable
          v-model="searchForm.operType"
          placeholder=""
        >
          <!--根据字典表生成下拉选项-->
          <el-option
            v-for="(label, value) in drugDict.oper"
            :key="value"
            :label="label"
            :value="Number(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字：">
        <el-input
          size="small"
          v-model="searchForm.keyword"
          placeholder="输入单号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable prop="id" label="序号" width="100">
      </el-table-column>
      <el-table-column sortable prop="recordNo" label="单号" width="200">
      </el-table-column>
      <el-table-column sortable prop="operType" label="操作类型" width="100">
        <template slot-scope="scope">
          <div>{{ drugDict.oper[scope.row.operType] }}</div>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="totalPrice"
        label="总金额(元)"
        width="200"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.totalPrice / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="operator" label="操作人员" width="200">
        <template slot-scope="scope">
          <div>{{ employeeDict[scope.row.operator] }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="operDate" label="操作时间" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.operDate | timestampToTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="showDetail(scope.$index, scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="handlePageEvent"
    ></Pagination>

    <!-- 详细信息界面 -->
    <el-dialog
      title="操作详情"
      :visible.sync="detailVisable"
      width="840px"
      @click="closeDialog"
    >
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="8"
              ><div>单号：{{ detailHeader.recordNo }}</div></el-col
            >
            <el-col :span="4"
              ><div>类型：{{ detailHeader.operType }}</div></el-col
            >

            <el-col :span="4"
              ><div>操作人员：{{ detailHeader.operator }}</div></el-col
            >
            <el-col :span="8"
              ><div>操作时间：{{ detailHeader.operDate }}</div></el-col
            >
          </el-row>
        </el-header>
        <el-main
          ><el-table
            size="small"
            :data="detailList"
            highlight-current-row
            v-loading="detailLoading"
            border
            element-loading-text="拼命加载中"
            style="width: 100%"
          >
            <el-table-column sortable prop="code" label="药品编码" width="100">
            </el-table-column>
            <el-table-column
              sortable
              prop="commonName"
              label="药品名称"
              width="160"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="factoryId"
              label="生产厂家"
              width="180"
            >
              <template slot-scope="scope">
                <div>{{ drugDict.factory[scope.row.factoryId] }}</div>
              </template>
            </el-table-column>
            <el-table-column sortable prop="operPrice" label="单价" width="80">
              <template slot-scope="scope">
                <div>{{ scope.row.operPrice / 100 }}</div>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="operQuantity"
              label="数量"
              width="80"
            >
            </el-table-column>
            <el-table-column sortable prop="unitId" label="单位" width="80">
              <template slot-scope="scope">
                <div>{{ drugDict.unit[scope.row.unitId] }}</div>
              </template>
            </el-table-column>
            <el-table-column sortable prop="totalPrice" label="金额" width="80">
              <template slot-scope="scope">
                <div>
                  {{ (scope.row.operPrice * scope.row.operQuantity) / 100 }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
// 引入药品类型字典
import { drugDict } from "../../dict/drugDict";
import Pagination from "../../components/Pagination";
// 引入 Axios
import axios from "axios";
import { timestampToTime } from "../../utils/util";

export default {
  props: ["employeeDict"],
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      detailLoading: false,
      detailVisable: false, //控制编辑页面显示与隐藏
      // rules表单验证
      rules: {
        commonName: [
          { required: true, message: "请输入药品通用名", trigger: "blur" },
        ],
      },
      // 搜索框数据
      searchForm: {
        keyword: "",
        operType: null,
      },
      // 删除部门
      seletedata: {
        ids: "",
        token: localStorage.getItem("logintoken"),
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      detailHeader: {}, // 详细信息Header
      detailList: [], // 详细信息数据
      // 分页参数
      pageparm: {
        pageNum: 1,
        pageSize: 10,
        total: 10,
      },
      drugDict: drugDict, // 药品相关字典
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据
    getdata() {
      this.loading = true;
      let dto = {
        pageNum: this.pageparm.pageNum,
        pageSize: this.pageparm.pageSize,
      };
      if (this.searchForm.keyword != "") dto.keyword = this.searchForm.keyword;
      if (this.searchForm.operType != null) {
        dto.stockOper = {};
        dto.stockOper.operType = this.searchForm.operType;
      }

      axios
        .post("/api/stockOper/select", dto)
        .then((res) => {
          this.listData = res.data.data.list;
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
      this.loading = false;
    },
    // 分页插件事件
    handlePageEvent(parm) {
      this.pageparm.pageNum = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getdata();
    },
    // 时间段选择事件
    handleDateTimeRange(param) {
      this.searchForm.dateTimeRange = param;
    },
    // 搜索事件
    search() {
      this.pageparm.pageNum = 1;
      this.getdata();
    },
    showDetail(index, row) {
      this.detailHeader = {
        recordNo: row.recordNo,
        operType: drugDict.oper[row.operType],
        operator: this.employeeDict[row.operator],
        operDate: timestampToTime(row.operDate),
      };
      this.detailVisable = true;
      this.detailLoading = true;
      // 根据id查询操作详细信息
      axios
        .get("/api/stockOper/selectByIdNested/" + row.id)
        .then((res) => {
          this.detailList = res.data.data.medicineList;
          this.detailLoading = false;
        })
        .catch((err) => {
          this.detailLoading = false;
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: rgb(51, 65, 87);
  color: white;
  text-align: center;
  line-height: 60px;
}
.el-row {
  margin: 0;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 